<template>
  <div class="rcentlySearch" v-show="list.length > 0">
    <div class="no1">
      <div>最近搜索</div>
      <van-icon name="delete-o" size="15" @click="remove()" />
    </div>

    <div class="box">
      <!-- @vue-skip -->
      <div class="item" v-for="item in list" :key="item">
        <!-- @vue-skip -->
        <span>{{ item.text.key }}</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { showConfirmDialog } from 'vant'
import 'vant/es/dialog/style'
import { ref } from 'vue'

// 限制 最近搜索 条数
const props = withDefaults(defineProps<{ max?: number }>(), {
  max: 18
})

// 先看看本地有没有 最近搜索数据
const recentGet = localStorage.getItem('searchhistory_3')

// 最近搜索 数组
const list = ref<{ key: string; tag: {} }[]>(recentGet ? JSON.parse(recentGet) : [])

function add(abc: { key: string; tag: {} }) {
  //去重
  if (!list.value.every((i) => i.key !== abc.key)) {
    return
  }
  // 1、追加到list中
  // @ts-ignore
  list.value.unshift(abc)
  // 2、控制最大18条记录
  list.value = list.value.splice(0, props.max)
  // 3、本地持久化
  localStorage.setItem('searchhistory_3', JSON.stringify(list.value))
}

// 对外暴漏
defineExpose({
  add
})

// 点击删除全部的 最近搜索记录
function remove() {
  showConfirmDialog({
    // title: '标题',
    message: '确定要清空吗？',
    width: '330px',
    // theme: 'round-button',
    confirmButtonColor: '#DF443B',
    theme: 'round-button'
  })
    .then(() => {
      // on confirm
      // 清空 list 数组中的记录
      list.value = []
      // 清空 本地存储的数据
      localStorage.removeItem('searchhistory_3')
    })
    .catch(() => {
      // on cancel
      return
    })
}
</script>

<style scoped>
.rcentlySearch {
  padding-left: 13px;
  margin-top: 15px;
}
.no1 {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  color: #232326;
  padding: 0 15px 11px 0;
}
.box {
  display: flex;
  flex-wrap: wrap;
}
.item {
  height: 23px;
  background-color: #f0f2f5;
  color: #686868;
  font-size: 14px;
  line-height: 23px;
  text-align: center;
  border-radius: 3px;
  padding: 0px 13px 0 13px;
  box-sizing: border-box;
  margin: 0px 10px 10px 0;
}
</style>
